<template>
  <div class="person-management">
    <div class="person-box">
      <el-row :gutter="0">
        <el-col :span="4">
          <div class="grid-content-le">
            <div class="side-tree-data">
              <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="grid-content-ri">
            <div class="table-data">
              <el-table :data="tableData" style="width: 100%" size="mini"
                element-loading-background="rgba(0, 0, 0, 0.8)" :stripe="false" :height="this.middle_height"
                :cell-style="valueStyle" border :header-cell-style="{
                  background: '#212830',
                  color: '#c7c7c9',
                  border: '1px solid #4e4c4c',
                }">
                <el-table-column prop="serialnumber" label="序号" align="center" width="60">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="90" align="center">
                </el-table-column>
                <el-table-column prop="sex" label="性别" width="50" align="center">
                </el-table-column>
                <el-table-column prop="department" label="部门" width="120" align="center">
                </el-table-column>
                <el-table-column prop="number" label="工号/邀请码" align="center">
                </el-table-column>
                <el-table-column prop="position" label="职务" width="120" align="center">
                </el-table-column>
                <!--  <el-table-column label="操作" width="180" align="center">
                  <template slot-scope="scope">
                    <el-button type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">任务</el-button>
                  </template>
</el-table-column> -->
              </el-table>
            </div>
          </div>
        </el-col>
        <el-col :span="13">
          <div class="grad-user-box">
            <div class="grad-user-main">
              <div class="grad-user-foundation">
                <div class="user-data">
                  <div class="user-data-content" style="padding-left: 10vh;">
                    <div class="user-data-main">
                      <span>姓名：<span style="margin-left: 3vh;">宁晓旭</span></span>
                    </div>
                    <div class="user-data-main">
                      <span>姓别：<span style="margin-left: 3vh;">男</span></span>
                    </div>
                    <div class="user-data-main">
                      <span>职务：<span style="margin-left: 3vh;">文职文员</span></span>
                    </div>
                    <div class="user-data-main">
                      <span>部门：<span style="margin-left: 3vh;">科协/工程处</span></span>
                    </div>
                    <div class="user-data-main">
                      <span>工号：<span style="margin-left: 3vh;">1111111111</span></span>
                    </div>
                  </div>
                  <div class="user-data-content" style="padding-left: 3vh;">
                    <div class="user-data-main">
                      <span>手机号：<span style="margin-left: 3vh;">13258925755</span></span>
                    </div>
                    <div class="user-data-main">
                      <span>座机号：<span style="margin-left: 3vh;">0298-284854</span></span>
                    </div>
                    <div class="user-data-main">
                      <span>身份证：<span style="margin-left: 3vh;">10115892585258525</span></span>
                    </div>
                    <div class="user-data-main">
                      <span>地址：<span style="margin-left: 4.5vh;">传播中心三层031工位</span></span>
                    </div>
                    <div class="user-data-main">
                      <span>APP：
                        <span v-if="authorizeText" style="margin-left: 4.5vh;color: red;cursor: pointer;"
                          @click="appAuthorize">未授权</span></span>
                    </div>
                  </div>
                  <div class="user-data-content">
                    <div class="user-data-main">
                      <span>小程序：<span style="margin-left: 4.5vh;color: red;cursor: pointer;"
                          @click="appAuthorize">未授权</span></span>
                    </div>
                    <div class="user-data-main">
                      <span>邮箱：<span style="margin-left: 4.5vh;">46846846@163.com</span></span>
                    </div>
                    <div class="user-data-main">
                      <div class="user-customize-tit"></div>
                      <div class="user-customize-con"></div>
                    </div>
                    <div class="user-data-main">
                      <div class="user-customize-tit"></div>
                      <div class="user-customize-con"></div>
                    </div>
                    <div class="user-data-main">
                      <div class="user-customize-tit"></div>
                      <div class="user-customize-con"></div>
                    </div>
                  </div>
                </div>
                <div class="user-img-box">
                  <div class="user-img"></div>
                </div>
              </div>
              <div class="user-inforemation">
                <div class="chat-header">
                  <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="通讯" name="first">
                      <div class="tab-box">
                        <div class="chat-content"></div>
                        <div class="chat-data">
                          <div class="chat-send"> 发送 </div>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="工单" name="second">
                      <div class="tab-box">
                        <el-table :data="orderData" style="width: 100%" size="mini"
                          element-loading-background="rgba(0, 0, 0, 0.8)" :stripe="false" :height="this.middle_height"
                          :cell-style="valueStyle" border :header-cell-style="{
                            background: '#212830',
                            color: '#c7c7c9',
                            border: '1px solid #4e4c4c',
                          }">
                          <el-table-column prop="id" label="ID" align="center" width="140">
                          </el-table-column>
                          <el-table-column prop="title" label="标题" align="center" width="180">
                          </el-table-column>
                          <el-table-column prop="status" label="状态" width="90" align="center">
                          </el-table-column>
                          <el-table-column prop="priority" label="优先级" width="70" align="center">
                          </el-table-column>
                          <el-table-column prop="createname" label="创建人" width="80" align="center">
                          </el-table-column>
                          <el-table-column prop="createtime" label="创建时间" align="center" width="150">
                          </el-table-column>

                          <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                              <el-button type="text" size="small" @click="checkVisible = true">查看</el-button>
                              <el-button type="text" size="small">完结</el-button>
                              <el-button type="text" size="small">转交</el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="考勤" name="third">
                      <div class="tab-box">
                        <div class="check-calendar">
                          <div class="check-header-box">
                            <span style="font-size: 15px;font-weight: 900;cursor: pointer;color: #1890FF;">＜ </span>
                            <span style="margin-left: 20px;white-space: nowrap;">2025-02</span>
                            <span
                              style="margin-left: 2vh;font-size: 15px;font-weight: 900;cursor: pointer;color: #1890FF;">＞</span>
                            <div
                              style="width: 5px;height: 5px;background-color: red;margin-left: 71vh;border-radius: 50%;">
                            </div>
                            <span style="margin-left: 1vh;white-space: nowrap;">旷工</span>
                            <div
                              style="width: 5px;height: 5px;background-color: #E4E411;margin-left: 1vh;border-radius: 50%;">
                            </div>
                            <span style="margin-left: 1vh;white-space: nowrap;">异常</span>
                            <div
                              style="width: 5px;height: 5px;background-color: #1890FF;margin-left: 1vh;border-radius: 50%;">
                            </div>
                            <span style="margin-left: 1vh;white-space: nowrap;">正常</span>
                          </div>
                          <el-calendar v-model="claendData" :first-day-of-week="1">
                            <template slot="dateCell" slot-scope="{ data }">
                              <div v-if="data.day == '2025-02-06'">
                                <span style="color: red;font-size: 11px;">{{ data.day.split("-").slice(2).join("-")
                                  }}&nbsp;&nbsp;</span>
                              </div>
                              <div v-else-if="data.day == '2025-02-02'" @click="checkClick(data.day)">
                                <span style="color: #E4E411;font-size: 11px;">{{ data.day.split("-").slice(2).join("-")
                                  }}&nbsp;&nbsp;</span>
                              </div>
                              <div @click="checkClick(data.day)" v-else>
                                <span>{{ data.day.split("-").slice(2).join("-")
                                  }}</span>&nbsp;&nbsp;
                              </div>
                            </template>
                          </el-calendar>
                          <div class="check-echarts-box">
                            <div class="echarts-box" style="flex-wrap: wrap;padding: 3vh 0 5vh 0;">
                              <div>
                                <span>2025-02-20：请假</span><br>
                                <div style="margin-top: 15px;line-height: 18px;">
                                  <span>
                                    最近，我的一位挚友在[具体日期]举行了婚礼，而由于婚礼安排的特殊性及距离较远，我作为重要的伴侣或亲近朋友，不得不在婚礼当天参与并协助筹办。由于婚礼的筹备工作十分繁忙，且婚礼期间需要我承担一定的责任，我未能按时到岗，这也导致了我的缺席。虽然我提前知道婚礼日期，但由于婚礼的安排较为紧凑，且是我非常亲近的朋友，因此我未能合理预估这一事件对工作安排的影响，未能提前向您请假。

                                    我完全意识到，作为公司的员工，我的缺席可能会影响到团队的工作进度，尤其是在当前项目的推进阶段。对此，我深感歉意，也对未能提前沟通做好工作安排感到后悔。在婚礼过后，我会加倍努力投入到工作中。

                                  </span>
                                </div>
                              </div>
                            </div>
                            <div class="echarts-box" style="justify-content:space-between;padding: 20px 0 20px 70px;">
                              <div style="width: 30vh;height: 100%;display: flex;flex-wrap: wrap;">
                                <div style="width: 100%;padding: 5px 5px;">
                                  <span>本月考勤统计</span>
                                </div>
                                <div style="width: 100%;padding: 5px 5px;">
                                  <span>本月正常次数：10次</span>
                                </div>
                                <div style="width: 100%;padding: 5px 5px;">
                                  <span>本月迟到次数：10次</span>
                                </div>
                                <div style="width: 100%;padding: 5px 5px;">
                                  <span>本月早退次数：10次</span>
                                </div>
                                <div style="width: 100%;padding: 5px 5px;">
                                  <span>本月请假次数：10次</span>
                                </div>
                                <div style="width: 100%;padding: 5px 5px;">
                                  <span>本月旷工次数：10次</span>
                                </div>
                              </div>
                              <div style="margin-right: -58px;">
                                <div style="width: 30vh;height: 27vh;" ref="echartsOne">
                                </div>

                              </div>
                            </div>
                          </div>
                          <div class="check-header-box">

                          </div>
                        </div>
                      </div>
                    </el-tab-pane>

                  </el-tabs>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="20%" :before-close="handleClose">
      <div class="dialog-content">
        <div class="dialog-content-item">
          <p style="margin-right: 5vh;margin-top: 2px">授权：</p>
          <el-switch v-model="authorizeValue" active-text="授权开" inactive-text="授权关" @change="switchAuthorize">
          </el-switch>
        </div>
        <div class="dialog-content-body">
          注：授权通过后用户即可登录国家科技传播中心运维APP，登录账号及密码默认为姓名的中文拼音（例：张三的账号为：zhangsan，密码：zhangsan），用户可登录APP修改密码。以下为APP安装包的二维码，安卓用户可通过微信扫码在浏览器中打开进行下载安装。ios用户暂未开通服务。
        </div>
      </div>
    </el-dialog>
    <el-dialog title="三层办公区灯光无法控制" :visible.sync="checkVisible" width="40%" :before-close="checkHandleClose">
      <div class="dialog-content">
        <div class="dialog-content-body">
          <div class="order-item" style="width: 100%;display: flex;">
            <div style="width: 7%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              ID：
            </div>
            <div style="width: 20%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              9999das8d46a8sd486
            </div>
            <div style="width: 7%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              部门：
            </div>
            <div style="width: 10%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              运维部
            </div>
            <div style="width: 10%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              优先级：
            </div>
            <div style="width: 5%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              高
            </div>
            <div style="width: 10%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              创建者：
            </div>
            <div style="width: 10%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              王瑞
            </div>
            <div style="width: 10%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              执行者：
            </div>
            <div style="width: 10%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              宁晓旭
            </div>
          </div>

          <div class="order-item" style="width: 100%;display: flex;">
            <div style="width: 7%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              状态：
            </div>
            <div style="width: 10%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              进行中
            </div>
            <div style="width: 7%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              日期：
            </div>
            <div style="width: 18%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              2025-02-02 12:12:12
            </div>
            <div style="width: 12%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              处理人电话：
            </div>
            <div style="width: 15%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              18888888888
            </div>
          </div>
          <!-- <div class="order-item" style="width: 100%;display: flex;">
            <div style="width: 20%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              工单创建者
            </div>
            <div style="width: 79%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              王瑞
            </div>
          </div> -->
          <!-- <div class="order-item" style="width: 100%;display: flex;">
            <div style="width: 20%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              工单执行人
            </div>
            <div style="width: 79%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              宁晓旭
            </div>
          </div> -->
          <!-- <div class="order-item" style="width: 100%;display: flex;">
            <div style="width: 20%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              日期
            </div>
            <div style="width: 79%;padding: 5px 5px;border: 1px solid #3B4453;text-align: center;color: #fff;">
              2025-02-02 12:12:12
            </div>
          </div> -->
          <div class="order-item" style="width: 100%;display: flex;">
            <div
              style="width: 20%;height: 10vh;padding: 5px 5px;border: 1px solid #3B4453;display: flex;color: #fff;justify-content: center;align-items: center;">
              问题描述
            </div>
            <div
              style="width: 79%;height: 10vh;padding: 5px 5px;border: 1px solid #3B4453;color: #fff;display: flex;justify-content: center;align-items: center;">
              最近两天，三层办公区灯光无法控制，午间时间无法通自动关灯，平板也无法控制，请尽快处理。
            </div>
          </div>
          <div class="order-item" style="width: 100%;display: flex;">
            <div
              style="width: 20%;height: 10vh;padding: 5px 5px;border: 1px solid #3B4453;display: flex;color: #fff;justify-content: center;align-items: center;">
              处理分析
            </div>
            <div
              style="width: 79%;height: 10vh;padding: 5px 5px;border: 1px solid #3B4453;color: #fff;display: flex;justify-content: center;align-items: center;">
              物业将三层办公区配电柜开关打成了手动模式，导致无法自动控制，现将开关恢复为自动模式，并检查其他开关是否出现类似问题。
            </div>
          </div>
          <div class="order-item" style="width: 100%;display: flex;">
            <div
              style="width: 20%;height: 20vh;padding: 5px 5px;border: 1px solid #3B4453;display: flex;color: #fff;justify-content: center;align-items: center;">
              图片
            </div>
            <div
              style="width: 79%;height: 20vh;padding: 5px 5px;border: 1px solid #3B4453;color: #fff;display: flex;justify-content: center;align-items: center;">
              <img src="../../../assets/001.jpg" style="width: 30vh;height: 19vh;" />
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      checkVisible: false,
      claendData: new Date(),
      authorizeText: true,
      authorizeValue: false,
      dialogVisible: false,
      activeName: 'third',
      chatShow: true,
      orderShow: false,
      checkShow: false,
      tableData: [
        {
          serialnumber: '1',
          name: '康卉',
          sex: '女',
          number: '1111111111',
          department: '科协/工程处',
          phone: '18614085182',
          idcard: '130705******100322',
          position: '文职人员'
        }, {
          serialnumber: '2',
          name: '李东晖',
          sex: '男',
          number: '1111111111',
          department: '科协/工程处',
          phone: '18531736370',
          idcard: '130282******190115',
          position: '文职人员'
        }, {
          serialnumber: '3',
          name: '宁晓旭',
          sex: '男',
          number: '1111111111',
          department: '科协/工程处',
          phone: '15120001193',
          idcard: '110111******028532',
          position: '文职人员'
        }, {
          serialnumber: '4',
          name: '冯宜哲',
          sex: '男',
          number: '1111111111',
          department: '科协/工程处',
          phone: '13452122512',
          idcard: '110111******026523',
          position: '文职人员'
        }, {
          serialnumber: '5',
          name: '刘磊',
          sex: '男',
          number: '1111111111',
          department: '科协/工程处',
          phone: '15950579509',
          idcard: '110111******018214',
          position: '文职人员'
        }, {
          serialnumber: '6',
          name: '王瑞',
          sex: '男',
          number: '1111111111',
          department: '科协/工程处',
          phone: '13522820029',
          idcard: '410328******050632',
          position: '副处级领导'
        }, {
          serialnumber: '7',
          name: '张硕',
          sex: '男',
          number: '1111111111',
          department: '科协/工程处',
          phone: '18910551833',
          idcard: '110111******088952',
          position: '副处级领导'
        }, {
          serialnumber: '8',
          name: '李敬翯',
          sex: '男',
          number: '1111111111',
          department: '科协/工程处',
          phone: '13901006361',
          idcard: '110111******054302',
          position: '文职人员'
        }, {
          serialnumber: '1',
          name: '康卉',
          sex: '女',
          number: '1111111111',
          department: '科协/工程处',
          phone: '18614085182',
          idcard: '130705******100322',
          position: '文职人员'
        }, {
          serialnumber: '2',
          name: '李东晖',
          sex: '男',
          number: '1111111111',
          department: '科协/工程处',
          phone: '18531736370',
          idcard: '130282******190115',
          position: '文职人员'
        }, {
          serialnumber: '3',
          name: '宁晓旭',
          sex: '男',
          number: '1111111111',
          department: '科协/工程处',
          phone: '15120001193',
          idcard: '110111******028532',
          position: '文职人员'
        }, {
          serialnumber: '4',
          name: '冯宜哲',
          sex: '男',
          number: '1111111111',
          department: '科协/工程处',
          phone: '13452122512',
          idcard: '110111******026523',
          position: '文职人员'
        }, {
          serialnumber: '5',
          name: '刘磊',
          sex: '男',
          number: '1111111111',
          department: '科协/工程处',
          phone: '15950579509',
          idcard: '110111******018214',
          position: '文职人员'
        }, {
          serialnumber: '6',
          name: '王瑞',
          sex: '男',
          number: '1111111111',
          department: '科协/工程处',
          phone: '13522820029',
          idcard: '410328******050632',
          position: '副处级领导'
        }, {
          serialnumber: '7',
          name: '张硕',
          sex: '男',
          number: '1111111111',
          department: '科协/工程处',
          phone: '18910551833',
          idcard: '110111******088952',
          position: '副处级领导'
        }, {
          serialnumber: '8',
          name: '李敬翯',
          sex: '男',
          number: '1111111111',
          department: '科协/工程处',
          phone: '13901006361',
          idcard: '110111******054302',
          position: '文职人员'
        }, {
          serialnumber: '5',
          name: '刘磊',
          sex: '男',
          number: '1111111111',
          department: '科协/工程处',
          phone: '15950579509',
          idcard: '110111******018214',
          position: '文职人员'
        }, {
          serialnumber: '6',
          name: '王瑞',
          sex: '男',
          number: '1111111111',
          department: '科协/工程处',
          phone: '13522820029',
          idcard: '410328******050632',
          position: '副处级领导'
        }, {
          serialnumber: '7',
          name: '张硕',
          sex: '男',
          number: '1111111111',
          department: '科协/工程处',
          phone: '18910551833',
          idcard: '110111******088952',
          position: '副处级领导'
        }, {
          serialnumber: '8',
          name: '李敬翯',
          sex: '男',
          number: '1111111111',
          department: '科协/工程处',
          phone: '13901006361',
          idcard: '110111******054302',
          position: '文职人员'
        }, {
          name: '',
          sex: '',
          number: '',
          department: '',
          phone: '',
          idcard: '',
          position: ''
        }],
      orderData: [{
        id: 'x5x8ds54g8dsf44',
        title: "三层办公区灯光无法控制",
        status: '进行中',
        priority: '高',
        createname: "王瑞",
        createtime: "2022-12-12 12:12:12",
      },
      {}],
      treeData: [{
        label: '国家科技传播中心',
        children: [{
          label: '财务处',
        }, {
          label: '成果处',
        }, {
          label: '传播规划处',
        }, {
          label: '服务处',
        }, {
          label: '工程处',
        }, {
          label: '局级领导',
        }, {
          label: '上级领导',
        }, {
          label: '数字处',
        }, {
          label: '外部人员',
        }, {
          label: '物业',
        }, {
          label: '信息处',
        }, {
          label: '影像处',
        }, {
          label: '综合处',
        }, {
          label: '总包单位',
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    };
  },

  computed: {

  },

  methods: {
    // 初始化数据
    handleNodeClick(data) {
      console.log(data);
    },
    // 重置表单
    resetForm() {
      this.$refs.personForm.resetFields();
    },
    chatSwitch() {
      this.chatShow = true;
      this.orderShow = false;
      this.checkShow = false;
    },
    orderSwitch() {
      this.chatShow = false;
      this.orderShow = true;
      this.checkShow = false;
    },
    checkSwitch() {
      this.chatShow = false;
      this.orderShow = false;
      this.checkShow = true;
    },
    // app授权
    appAuthorize() {
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    // 授权开关
    switchAuthorize() {
      alert(this.authorizeValue)
    },
    checkClick(data) {
      this.checkVisible = true
    },
    checkHandleClose() {
      this.checkVisible = false
    },
    // 切换页签
    handleClick(tab, event) {
      console.log(tab.name);
      if (tab.name == 'third') {
        this.echartsOption()
      }
    },
    echartsOption() {
      let myChartOne = this.$echarts.init(this.$refs.echartsOne);
      let option = {
        color: ["#FD0000", "#E4E411", "#1890FF"],
        grid: {
          top: '5%',
          left: '10%', //grid 组件离容器左侧的距离。
          right: '4%', //grid 组件离容器右侧的距离。
          bottom: '0%', //grid 组件离容器下侧的距离。
          containLabel: true //grid 区域是否包含坐标轴的刻度标签[ default: false ] 
        },
        title: {
          text: '30%',
          subtext: '出勤率',
          top: 'middle',
          left: 'center',
          textStyle: {
            color: '#FEDA66',
            fontSize: 25
          }
        },
        /* tooltip: {
          trigger: 'item',
          formatter: function (params) {
            // params 是包含数据信息的对象
            // return '自定义内容：' + params.name + ' - ' + params.value;
            if (params.id == 0) {
              return ""
            } else {
              return `53kW`
            }
          }
        }, */
        /*  legend: {
           orient: 'vertical',
           left: 'left',
           show: false
         }, */
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            data: [
              { value: 40, name: 'F1' },
              { value: 60, name: 'F2' },
              { value: 80, name: 'F3' },
            ],
            label: {
              show: false  // 关闭标签显示
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false,
            }
          }
        ]
      }
      myChartOne.setOption(option);
    }
  },

  mounted() {

  },
};
</script>

<style scoped>
.person-management {
  padding: 2px 0px 0px 0px;
}

.person-box {
  width: 100%;
  height: 91vh;
  overflow: hidden;
}

.grid-content-le {
  width: 100%;
  height: 91vh;
  border-radius: 4px;
}

.table-tree {
  width: 100%;
  height: 100%;
  background-color: #3B4453;
}

.grid-content-ri {
  width: 100%;
  height: 91vh;
  border-radius: 4px;
}

.grad-user-box {
  width: 100%;
  height: 91vh;
  border-radius: 4px;
}

.grad-user-main {
  width: 100%;
  height: 90vh;
  background-color: #212830;
  border: 1px solid #383639;
  padding: 0px 5px 1px 1px;
  border-left: 1px solid transparent;
}

.grad-user-foundation {
  width: 100%;
  height: 17vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: -5vh;
}

.user-inforemation {
  width: 87.5%;
  height: 72.5vh;
  margin-left: 5.4vh;
}

.chat-header {
  width: 100%;
  height: 72.5vh;
  display: flex;
  justify-content: start;
  align-items: center;
  font-size: 11px;
  color: #fff;
  /* border-bottom: 1px solid #383639; */

}

.chat-menu-one {
  width: 10vh;
  height: 3vh;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.chat-menu-x {
  width: 3vh;
  height: 3vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chat-menu-xie {
  width: 1px;
  height: 4vh;
  transform: rotate(-45deg);
  background-color: #3B4453;
}


.chat-img1 {
  width: 1.7vh;
  height: 1.7vh;
  background-image: url('../../../assets/menu/工单.png');
  background-size: 100% 100%;
  cursor: pointer;
  margin-left: 4vh;
}

.chat-img2 {
  width: 1.7vh;
  height: 1.7vh;
  background-image: url('../../../assets/menu/及时通讯.png');
  background-size: 100% 100%;
  margin-left: 1vh;
  cursor: pointer;
}

.chat-content {
  width: 100%;
  height: 54vh;
  border-bottom: 1px solid #383639;
}

.other-content {
  width: 100%;
  height: 68vh;
}

.chat-data {
  width: 100%;
  height: 13vh;
  position: relative;
}

.chat-send {
  width: 6vh;
  height: 2.5vh;
  background-color: #3157BA;
  position: absolute;
  bottom: 10px;
  right: 20px;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  color: #fff;
}

.user-img-box {
  width: 16vh;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-img {
  width: 11vh;
  height: 80%;
  background-image: url('../../../assets/user.jpg');
  background-size: 100% 100%;
}

.user-data {
  width: 96vh;
  height: 100%;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-data-content {
  width: 31vh;
  height: 100%;
}

.user-data-main {
  width: 100%;
  padding: 7px;
  height: 3vh;
  font-size: 11px;
  color: #fff;
  display: flex;
  justify-content: space-between;
}

.user-customize-tit {
  width: 6vh;
  background-color: #3B4453;
}

.user-customize-con {
  width: 22vh;
  background-color: #3B4453;
}

.table-data {
  width: 100%;
  height: 90vh;
  background-color: #212830;
  border: 1px solid #383639;
}

.side-tree-data {
  width: 100%;
  height: 90vh;
  background-color: #212830;
  border: 1px solid #383639;
  border-right: 1px solid transparent;
}

.dialog-content {
  width: 100%;
  height: 50vh;
}

.dialog-content-item {
  width: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  color: #fff;
  font-size: 10px;
}

.dialog-content-body {
  width: 100%;
  font-size: 10px;
  color: #afafaf;
  padding-top: 2vh;
}

.tab-box {
  width: 100%;
  height: 67vh;
}

.check-title {
  width: 100%;
}

.check-calendar {
  width: 100%;
  height: 65vh;
}

.check-header-box {
  width: 100%;
  color: #fff;
  font-size: 11px;
  padding: 3px 3px 3px 0px;
  display: flex;
  justify-content: start;
  align-items: center;
}

.check-echarts-box {
  width: 100%;
  height: 27vh;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.echarts-box {
  width: 48%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
<style>
.el-table tbody tr:hover>td {
  background-color: #3B4453 !important
}

/* 表格背景色*/
.el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}

.el-table tr {
  background-color: transparent !important;
}

.el-table--enable-row-transition .el-table__body td,
.el-table .cell {
  background-color: transparent !important;
}

/* 去掉底部白线*/
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

/* 字体颜色*/
.el-table tr {
  background-color: transparent !important;
  color: #f0f0f0 !important;
  font-size: 11px !important;
}

.el-table__body tr,
.el-table__body td {
  border-left: 1px solid #383639 !important;
}

/* 右 边线 颜色*/
.el-table--border:after,
.el-table--group:after,
.el-table:before {
  background-color: transparent !important;
}

/* 四 边线 颜色*/
.el-table--border,
.el-table--group {
  border-color: transparent !important;
}

/**
  改变表格内行线颜色
 */
.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #383639 !important;
}

.el-table thead tr th {
  border-color: #3B4453 !important;
}

/*
改变表格内竖线颜色
*/
.el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
  border-right: 1px solid #383639 !important;
}

/**
改变边框颜色
 */
.el-table--border,
.el-table--group {
  border: 1px solid transparent !important;
}

/**
  表格的行高
 */
.el-table__body tr,
.el-table__body td {
  padding: 0 !important;
  height: 30px !important;
}

.el-tree {
  background-color: transparent !important;
  color: #f0f0f0 !important;

}

.el-tree-node__label {
  font-size: 11px !important;
}

.el-tree-node__content:hover {
  background-color: #3B4453 !important;
}

.el-tree-node:focus>.el-tree-node__content {
  background-color: #3B4453;
}

.el-switch__label {}

.el-switch__label * {
  font-size: 11px !important;
}

.el-tabs__item {
  font-size: 11px !important;
  color: #ffffff !important;
  width: 47%;
  text-align: center;
  height: 31px !important;
}

.el-tabs__item:hover {
  color: #1890FF !important;
}

.el-tabs__item.is-active {
  color: #1890ff !important;
}

.el-tabs__active-bar {
  height: 1px !important;
}

.el-tabs__nav-wrap::after {
  height: 1px !important;
  background-color: #383639;
}

.el-tabs__nav-scroll {
  width: 47vw !important;
}

.el-calendar-table .el-calendar-day {
  height: 27px !important;
}

.el-calendar {
  background-color: transparent !important;
}

.el-calendar-table .el-calendar-day:hover {
  background-color: #2C3440 !important;
}

.el-calendar-table td.is-selected {
  background-color: #2C3440 !important;
}

.el-calendar__title {
  color: #ffffff;
}

.el-calendar__header {
  padding: 3px 0px;
  border-bottom: 1px solid transparent;
  display: none;
}

.el-calendar-table thead th {
  text-align: center;
  color: #ffffff;
}

.el-calendar-table tr:first-child td {
  border-top: 1px solid #383639;
}

.el-calendar-table td {
  border-bottom: 1px solid #383639;
  border-right: 1px solid #383639;
}

.el-calendar-table tr td:first-child {
  border-left: 1px solid #383639;
}

.el-calendar-table:not(.is-range) td.prev,
.el-calendar-table:not(.is-range) td.next {
  color: #505050;
}

.el-calendar-table thead th {
  border: 1px solid #383639;
}

.el-calendar__body {
  padding: 0px 0px 0px !important;
}

.el-calendar__button-group {
  display: none;
}

.el-calendar-table thead th {
  padding: 7px 0 !important;
}
</style>